import React, {memo, useState} from 'react';

// 普通子组件（未优化）
const Child = ({value}) => {
    console.log('子组件渲染:', value);
    return <div>{value}</div>;
};

// 使用React.memo优化的子组件
const MemoChild = memo(({value}: { value: any }) => {
    console.log('记忆化子组件渲染:', value);
    return <div>{value}</div>;
});

export function TestReactMemo() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('hello');

    return (
        <div>
            <button onClick={() => setCount(c => c + 1)}>点击计数: {count}</button>
            <input value={text} onChange={(e) => setText(e.target.value)}/>

            <Child value="普通组件"/>
            <MemoChild value="记忆化组件"/>
        </div>
    );
}